import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
// import AceEditor from 'react-ace'
// import 'brace/mode/python'
// import 'brace/theme/github'
// import 'brace/snippets/python'

const styles = () => ({
  root: {
    flexGrow: 1,
  },
})

const YaKEditor = (props) => {
  if (typeof window !== 'undefined') {
    const Ace = require('react-ace').default // eslint-disable-line
    module.exports = require('brace') // eslint-disable-line
    require('brace/mode/python.js') // eslint-disable-line
    require('brace/theme/github.js') // eslint-disable-line
    require('brace/snippets/python.js') // eslint-disable-line
    return <Ace {...props} />
  }

  return null;
}

class InputArea extends React.Component {
  constructor() {
    super()
    this.state = {
      fontSize: 15,
      mounted: false,
    }
  }

  componentDidMount() {
    // do something here
    this.setState({ mounted: true })
  }

  render() {
    const { mounted } = this.state
    const {
      classes,
      editorInput,
      updateInput,
    } = this.props
    return (
      mounted
        ? (
          <div className={classes.flexGrow}>
            <YaKEditor
              mode="python"
              theme="github"
              name="yak-python-ide"
              value={editorInput}
              onChange={updateInput}
              fontSize={this.state.fontSize}
              showPrintMargin
              showGutter
              highlightActiveLine
              setOptions={{
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 4,
              }}
              style={{ width: 'auto' }}
            />
          </div>
        ) : null
    )
  }
}

InputArea.propTypes = {
  classes: PropTypes.object.isRequired,
  editorInput: PropTypes.string.isRequired,
  updateInput: PropTypes.func.isRequired,
}

export default withStyles(styles)(InputArea)
